<!-- 统计分析 采购付款统计 -->
<template>
<view style="height: 100vh;">
<layout index="/pages/scm/index/index">
  <view class="carbon-container">
    <!-- 查询表单 -->
    <van-collapse :value="showSearch ? ['search'] : []">
      <van-collapse-item title="筛选条件" name="search">
        <van-form @submit="handleQuery">
          <van-field
            label="年份"
            label-width="4em"
            readonly
            clickable
            :value="queryParams.contractYear"
            placeholder="选择年份"
            @click="showYearPicker = true"
          >
            <template #button>
              <van-icon name="calendar-o" />
            </template>
          </van-field>
          <van-popup v-model:show="showYearPicker" position="bottom">
            <van-datetime-picker
              type="year"
              title="选择年份"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="onYearConfirm"
              @cancel="showYearPicker = false"
              :formatter="formatter"
            />
          </van-popup>

          <van-field
            label="供应商"
            label-width="4em"
            placeholder="请选择供应商"
            readonly
            clickable
            :value="selectedSupplierLabel"
            @click="showSupplierPicker = true"
          >
            <template #button>
              <van-icon name="arrow-down" />
            </template>
          </van-field>
          <van-popup v-model:show="showSupplierPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="supplierIdOptions"
              value-key="dictLabel"
              @confirm="onSupplierConfirm"
              @cancel="showSupplierPicker = false"
            />
          </van-popup>

          <van-field
            v-model="queryParams.contractNo"
            label="合同编号"
            label-width="4em"
            placeholder="请输入合同编号"
            clearable
          />

          <van-field
            v-model="queryParams.applyNo"
            label="申请编号"
            label-width="4em"
            placeholder="请输入申请编号"
            clearable
          />

          <div class="form-buttons">
            <van-button round type="primary" color="#2a9d8f" native-type="submit">搜索</van-button>
            <van-button round plain color="#2a9d8f" @click="resetQuery">重置</van-button>
          </div>
        </van-form>
      </van-collapse-item>
    </van-collapse>

    <!-- 统计切换 -->
    <van-tabs v-model:active="activeName" title-active-color="#2a9d8f" color="#76c893">
      <van-tab title="季度统计">
        <scroll-view scroll-x class="table-scroll">
          <view class="carbon-table">
            <view class="table-header bg-primary">
              <text class="header-item">季度</text>
              <text class="header-item">申请编号</text>
              <text class="header-item">合同编号</text>
              <text class="header-item">供应商名称</text>
              <text class="header-item">应付金额</text>
            </view>
            <view 
              v-for="(item, index) in quarterList"
              :key="index"
              class="table-row"
              :class="index % 2 === 0 ? 'bg-even' : 'bg-odd'"
            >
              <text class="row-item">{{ item.contractQuarter }}</text>
              <text class="row-item">{{ item.applyNo }}</text>
              <text class="row-item">{{ item.contractNo }}</text>
              <text class="row-item">{{ item.supplierName }}</text>
              <text class="row-item amount">¥{{ item.contractAmount }}</text>
            </view>
          </view>
        </scroll-view>
      </van-tab>
      <van-tab title="月份统计">
        <scroll-view scroll-x class="table-scroll">
          <view class="carbon-table">
            <view class="table-header bg-primary">
              <text class="header-item">月份</text>
              <text class="header-item">申请编号</text>
              <text class="header-item">合同编号</text>
              <text class="header-item">供应商名称</text>
              <text class="header-item">应付金额</text>
            </view>
            <view 
              v-for="(item, index) in monthList"
              :key="index"
              class="table-row"
              :class="index % 2 === 0 ? 'bg-even' : 'bg-odd'"
            >
              <text class="row-item">{{ item.contractMonth }}</text>
              <text class="row-item">{{ item.applyNo }}</text>
              <text class="row-item">{{ item.contractNo }}</text>
              <text class="row-item">{{ item.supplierName }}</text>
              <text class="row-item amount">¥{{ item.contractAmount }}</text>
            </view>
          </view>
        </scroll-view>
      </van-tab>
    </van-tabs>

    <!-- 空状态 -->
    <van-empty
      v-if="quarterList.length === 0 && monthList.length === 0"
      description="暂无数据"
      image="/static/empty.png"
    />
  </view>
</layout>
</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 模拟供应商数据
const supplierIdOptions = ref([
  { dictValue: '1', dictLabel: '绿色能源公司' },
  { dictValue: '2', dictLabel: '环保材料集团' },
  { dictValue: '3', dictLabel: '碳中和科技' },
]);

// 模拟季度数据
const quarterList = ref([
  {
    contractQuarter: '2023-Q1',
    applyNo: 'SQ2023001',
    contractNo: 'HT2023001',
    supplierName: '绿色能源公司',
    contractAmount: '500,000.00',
  },
  {
    contractQuarter: '2023-Q2',
    applyNo: 'SQ2023002',
    contractNo: 'HT2023002',
    supplierName: '环保材料集团',
    contractAmount: '300,000.00',
  },
]);

// 模拟月度数据
const monthList = ref([
  {
    contractMonth: '2023-01',
    applyNo: 'SQ2023001',
    contractNo: 'HT2023001',
    supplierName: '绿色能源公司',
    contractAmount: '200,000.00',
  },
  {
    contractMonth: '2023-02',
    applyNo: 'SQ2023002',
    contractNo: 'HT2023002',
    supplierName: '环保材料集团',
    contractAmount: '100,000.00',
  },
]);

// 查询参数
const queryParams = reactive({
  contractNo: '',
  applyNo: '',
  supplierId: '',
  contractYear: new Date().getFullYear().toString(),
});

// 年份选择器
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2030, 11, 31);
const showYearPicker = ref(false);

// 供应商选择器
const showSupplierPicker = ref(false);
const selectedSupplierLabel = ref('');

// 格式化年份
const formatter = (type, val) => {
  if (type === 'year') return `${val}年`;
  return val;
};

// 确认选择年份
const onYearConfirm = (value) => {
  queryParams.contractYear = value.getFullYear().toString();
  showYearPicker.value = false;
};

// 确认选择供应商
const onSupplierConfirm = (value) => {
  queryParams.supplierId = value.dictValue;
  selectedSupplierLabel.value = value.dictLabel;
  showSupplierPicker.value = false;
};

// 查询处理
const handleQuery = () => {
  // 模拟过滤逻辑
  const filterQuarter = quarterList.value.filter(item =>
    (!queryParams.supplierId || item.supplierId === queryParams.supplierId) &&
    (!queryParams.contractNo || item.contractNo.includes(queryParams.contractNo)) &&
    (!queryParams.applyNo || item.applyNo.includes(queryParams.applyNo))
  );
  quarterList.value = filterQuarter;

  const filterMonth = monthList.value.filter(item =>
    (!queryParams.supplierId || item.supplierId === queryParams.supplierId) &&
    (!queryParams.contractNo || item.contractNo.includes(queryParams.contractNo)) &&
    (!queryParams.applyNo || item.applyNo.includes(queryParams.applyNo))
  );
  monthList.value = filterMonth;
};

// 重置查询
const resetQuery = () => {
  queryParams.contractNo = '';
  queryParams.applyNo = '';
  queryParams.supplierId = '';
  selectedSupplierLabel.value = '';
  queryParams.contractYear = new Date().getFullYear().toString();
  handleQuery();
};

// 初始化数据
onMounted(() => {
  handleQuery();
});
</script>

<style lang="scss">
.carbon-container {
  background-color: #f5fbf8; /* 页面背景色 */
  min-height: 100vh;
  padding: 20rpx;

  .form-buttons {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;

    .van-button {
      width: 200rpx;
    }
  }

  .table-scroll {
    height: calc(100vh - 400rpx);
    overflow-x: auto;
  }

  .carbon-table {
    min-width: 1200rpx;
    margin: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(42, 157, 143, 0.1);

    .table-header {
      background-color: #2a9d8f; /* 表头背景色 */
      padding: 24rpx;
      display: flex;

      .header-item {
        flex: 1;
        min-width: 200rpx;
        text-align: center;
        color: #fff; /* 表头文字颜色 */
        font-size: 28rpx;
        font-weight: 500;
      }
    }

    .table-row {
      display: flex;
      padding: 24rpx;
      transition: all 0.3s;

      .row-item {
        flex: 1;
        min-width: 200rpx;
        text-align: center;
        font-size: 26rpx;
        color: #2a5d52; /* 表格内容文字颜色 */

        &.amount {
          color: #76c893; /* 金额文字颜色 */
          font-weight: 500;
        }
      }

      &:active {
        background-color: #e8f5f2; /* 点击时的背景色 */
      }
    }

    .bg-even {
      background-color: #fff; /* 偶数行背景色 */
    }

    .bg-odd {
      background-color: #f8fcfb; /* 奇数行背景色 */
    }
  }
}
</style>